

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>我的购物车</title>
    <link rel="stylesheet" type="text/css" href="/static/home/css/pages-cart.css" />


	<script type="text/javascript" src="/static/home/js/pages/index.js"></script>
</head>

<body>


	<!--主内容-->
	<div class="cart py-container">
		<!--All goods-->
		<div class="allgoods">
			<h4>全部商品<span>11</span></h4>
			<div class="cart-main">
				<div class="yui3-g cart-th">
					<div class="yui3-u-1-4"><input type="checkbox" name="" id="" value="" /> 全部</div>
					<div class="yui3-u-1-4">商品</div>
					<div class="yui3-u-1-8">单价（元）</div>
					<div class="yui3-u-1-8">数量</div>
					<div class="yui3-u-1-8">小计（元）</div>
					<div class="yui3-u-1-8">操作</div>
				</div>
				<div class="cart-item-list">
					<div class="cart-shop">
						<input type="checkbox" name="" id="" value="" />
						<span class="shopname self">传智自营</span>
					</div>
					<div class="cart-body">
						{foreach $data as $value}
						<div class="cart-list">
							<ul class="goods-list yui3-g">
								<li class="yui3-u-1-24">

									{if $value.is_selected == 1}
										<input type="checkbox" class="row_check" checked name="" id="" value="{$value.id}" />
									{else /}
										<input type="checkbox" class="row_check" name="" id="" value="{$value.id}" />
									{/if}
								</li>
								<li class="yui3-u-6-24">
									<div class="good-item">
										<div class="item-img"><img src="{$value.goods_logo}" /></div>
										<div class="item-msg">{$value.goods_name}</div>
									</div>
								</li>
								<li class="yui3-u-5-24">
									<div class="item-txt">{$value.value_names}</div>
								</li>
								<li class="yui3-u-1-8"><span class="price">{$value.price}</span></li>
								<li class="yui3-u-1-8">
									<a href="javascript:void(0)" class="increment mins">-</a>
									<input autocomplete="off" type="text" value="{$value.number}" minnum="1" class="itxt current_number" />
									<a href="javascript:void(0)" class="increment plus">+</a>
								</li>
								<li class="yui3-u-1-8"><span class="sum">{$value.number * $value.price}</span></li>
								<li class="yui3-u-1-8">
									<a href="#none" class="delete">删除</a><br />
									<a href="#none">移到我的关注</a>
								</li>
							</ul>
						</div>
						{/foreach}
					</div>
				</div>
			</div>
			<div class="cart-tool">
				<div class="select-all">
					<input type="checkbox" class="check_all" name="" value="" />
					<span>全选</span>
				</div>
				<div class="option">
					<a href="#none">删除选中的商品</a>
					<a href="#none">移到我的关注</a>
					<a href="#none">清除下柜商品</a>
				</div>
				<div class="money-box">
					<div class="chosed">已选择<span id="total_number">0</span>件商品</div>
					<div class="sumprice">
						<span><em>总价（不含运费） ：</em><i id="total_price" class="summoney">¥0</i></span>
						<span><em>已节省：</em><i>-¥0</i></span>
					</div>
					<div class="sumbtn">
						<a class="sum-btn" href="javascript:;" target="_blank">结算</a>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="deled">
				<span>已删除商品，您可以重新购买或加关注：</span>
				<div class="cart-list del">
					<ul class="goods-list yui3-g">
						<li class="yui3-u-1-2">
							<div class="good-item">
								<div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
							</div>
						</li>
						<li class="yui3-u-1-6"><span class="price">8848.00</span></li>
						<li class="yui3-u-1-6">
							<span class="number">1</span>
						</li>
						<li class="yui3-u-1-8">
							<a href="#none">重新购买</a>
							<a href="#none">移到我的关注</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="liked">
				<ul class="sui-nav nav-tabs">
					<li class="active">
						<a href="#index" data-toggle="tab">猜你喜欢</a>
					</li>
					<li>
						<a href="#profile" data-toggle="tab">特惠换购</a>
					</li>
				</ul>
				<div class="clearfix"></div>
				<div class="tab-content">
					<div id="index" class="tab-pane active">
						<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
							<div class="carousel-inner">
								<div class="active item">
									<ul>
										<li>
											<img src="/static/home/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
								<div class="item">
									<ul>
										<li>
											<img src="/static/home/img/like1.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like2.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like3.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
										<li>
											<img src="/static/home/img/like4.png" />
											<div class="intro">
												<i>Apple苹果iPhone 6s (A1699)</i>
											</div>
											<div class="money">
												<span>$29.00</span>
											</div>
											<div class="incar">
												<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span class="cartxt">加入购物车</span></a>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
							<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
						</div>
					</div>
					<div id="profile" class="tab-pane">
						<p>特惠选购</p>
					</div>
				</div>
			</div>
		</div>
	</div>


</body>

<script>
	// 点击-
	$('.mins').click(function () {
		var  current_number = $(this).next().val();
		if (current_number == 1) {
			return false;
		} else {
			var current_number = parseInt(current_number)-1;
			$(this).next().val(current_number);
		}
		// 修改小计 找单价
		var price = $(this).closest('ul').find('.price').text();
		// var price = $(this).parent().prev().find('.price').text();
		var sum = price * parseInt(current_number);
		$(this).closest('ul').find('.sum').text(sum);
		var id = $(this).closest('ul').find('.row_check').val();
		// 重新计算总价格、总数量
		total_message();
		// 发送请求、修改购物车数据
		$.ajax({
			url:'/changeNumber',
			data:{id:id,current_number:current_number},
			dataType:'json',
			type:'post',
			success:function (data) {
				if (data.code != 200) {
					alert(data.msg);
				}

			}
		})

	});
	// 点击+
	$('.plus').click(function () {
		var  current_number = $(this).prev().val();
		if (current_number >= 10) {
			return false;
		} else {
			var current_number = parseInt(current_number)+1;
			$(this).prev().val(current_number);
		}
		var price = $(this).closest('ul').find('.price').text();
		var sum = price * parseInt(current_number);
		$(this).closest('ul').find('.sum').text(sum);
		var id = $(this).closest('ul').find('.row_check').val();
		// 重新计算总价格、总数量
		total_message();
		// 发送请求、修改购物车数据
		$.ajax({
			url:'/changeNumber',
			data:{id:id,current_number:current_number},
			dataType:'json',
			type:'post',
			success:function (data) {

			}
		});
	});

	// 失去焦点事件
	$('.current_number').blur(function () {
		var  current_number = $(this).val();
		if (current_number <=1) {
			 current_number = 1;
			$(this).val(1);
		} else if (current_number >= 10) {
			 current_number = 10;
			$(this).val(10);
		}
		var price = $(this).closest('ul').find('.price').text();
		var sum = price * parseInt(current_number);
		$(this).closest('ul').find('.sum').text(sum);
		var id = $(this).closest('ul').find('.row_check').val();
		// 重新计算总价格、总数量
		total_message();
		// 发送请求、修改购物车数据
		$.ajax({
			url:'/changeNumber',
			data:{id:id,current_number:current_number},
			dataType:'json',
			type:'post',
			success:function (data) {

			}
		});
	});
	//调用
	total_message();
	// 计算总数量、总价格
	function total_message() {
		// 定义两个变量、存储总数量、总价格
		var total_number = 0;
		var total_price = 0;
		//获取所有选中的复选框
		$('.row_check:checked').each(function (i,v) {
			total_number += parseInt($(v).closest('ul').find('.current_number').val());
			total_price += parseInt($(v).closest('ul').find('.sum').text());
		});

		// 将计算后的数据、放在页面
		$('#total_number').text(total_number);
		$('#total_price').text('¥'+total_price);
	}

	// 复选框点击事件
	$('.row_check').click(function () {
		var id = $(this).val();
		var is_selected = $(this).prop('checked') ? 1 : 0;
		// 重新计算总价格、总数量
		total_message();
		// 检验当前每一行的复选框是否全部选中
		check_all();
		// 发送请求、修改购物车数据是否选中
		$.ajax({
			url:'/changeSelected',
			data:{id:id,is_selected:is_selected},
			dataType:'json',
			type:'post',
			success:function (data) {
				if (data.code != 200) {
					alert(data.msg);
				}
			}
		});
	});
	// 页面加载调用
	check_all();
	// 检验当前每一行的复选框是否全部选中
	function check_all(){
		// 获取所有商品对应的复选框长度
		var all_length = $('.row_check').length
		// 获取所有商品选中对应的复选框长度
		var checked_length = $('.row_check:checked').length
		if (all_length == checked_length && all_length > 0) {
			$('.check_all').prop('checked',true)
		} else {
			$('.check_all').prop('checked',false)
		}
	}
	// 全选
	$('.check_all').click(function () {
		var all_checked = $(this).prop('checked') ? 1 : 0;
		// 修改每一行的复选框的选中状态 选中状态和全选复选框的状态一直
		var status = all_checked ? true : false;
		$('.row_check').prop('checked',status);

		// 重新计算总价格、总数量
		total_message();
		// 发送请求、修改购物车数据是否选中
		$.ajax({
			url:'/changeSelected',
			data:{id:0,is_selected:all_checked},
			dataType:'json',
			type:'post',
			success:function (data) {
				if (data.code != 200) {
					alert(data.msg);
				}
			}
		});
	});

	// 购物车删除
	$('.delete').click(function () {
		var id = $(this).closest('ul').find('.row_check').val();
		var that = $(this);
		// 发送请求、修改购物车数据
		$.ajax({
			url:'/cartDelete',
			data:{id:id},
			dataType:'json',
			type:'post',
			success:function (data) {
				that.closest('ul').parent().remove();
				// 重新计算总价格、总数量
				total_message();
				check_all();
			}
		});
	});

	// 结算
	$('.sum-btn').click(function () {
		// 获取所有商品选中对应的复选框长度
		var checked_length = $('.row_check:checked').length
		if (checked_length == 0) {
			alert('请选择一件商品');
			return false;
		}
		location.href = '/getOrderInfo';
	})
</script>

